<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <include file="./Public/Tpl/head.html" title="基本信息管理" description="药品管理系统." keywords="中南民族大学,药品管理系统"/>
</head>
<body>
<include file="./Public/Tpl/nav.html"/>
<div class="container">
  <div class="col-md-2">
    <div class="panel panel-info">
      <div class="panel-heading">功能</div>
      <div class="list-group list-menu">
        <button type="button" class="list-group-item list-menu active" data-to="0">药店信息</button>
        <button type="button" class="list-group-item list-menu" data-to="1" onclick="loadList(size,page)">药品基础信息</button>
      </div>
    </div>
  </div>
  <div class="col-md-10">
    <div class="panel panel-info func">
      <div class="panel-heading" style="text-align: center">{$store.storename}</div>
      <div class="panel-body">
        <p>{$store.storename}的简介在这里</p>
      </div>
      <table class="table table-hover">
        <tr>
          <td>店铺联系方式:</td>
          <td>{$store.telephone}</td>
        </tr>
        <tr>
          <td>店长手机号码:</td>
          <td>{$store.mobile}</td>
        </tr>
        <tr>
          <td>店铺地址:</td>
          <td>{$store.address}</td>
        </tr>
      </table>
    </div>
    <div class="panel panel-info func" id="drugList">
      <div class="panel-heading" style="text-align: center">药品信息库</div>
      <div class="panel-body">
        <span data-toggle="tooltip" data-placement="right" title="添加新的药品">
          <button type="button" class="btn btn-success" data-toggle="modal" data-target="#addModal">新增药品</button></span>
        <table class="table table-hover">
          <thead>
          <tr>
            <th>药品编号</th>
            <th>药品名称</th>
            <th>拼音码</th>
            <th>规格</th>
            <th>单位</th>
            <th>最低限数量</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="info in list" data-toggle="modal" data-target="#drugModal">
            <td>{{ info.drug_id }}</td>
            <td>{{ info.name }}</td>
            <td>{{ info.pinyinma }}</td>
            <td>{{ info.spec }}</td>
            <td>{{ info.unit }}</td>
            <td>{{ info.lowwarning }}</td>
          </tr>
          </tbody>
        </table>
        <div id="drugPage" class="center">
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <!-- Modal -->
    <div class="modal fade" id="drugModal" tabindex="-1" role="dialog" aria-labelledby="drugModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="drugModalLabel">药品名</h4>
          </div>
          <div class="modal-body">
            <form id="drugForm" class="form-horizontal">
              <div class="form-group">
                <label for="inputName" class="col-sm-2 control-label">名称</label>
                <div class="col-sm-10">
                  <input name="name" type="text" class="form-control" id="inputName" placeholder="读取错误"
                         autocomplete="off">
                  <input name="drug_id" type="hidden" class="form-control" id="inputDrugId">
                </div>
              </div>
              <div class="form-group">
                <label for="inputPinYinMa" class="col-sm-2 control-label">拼音码</label>
                <div class="col-sm-10">
                  <input name="pinyinma" type="text" class="form-control" id="inputPinYinMa" placeholder="读取错误"
                         autocomplete="off">
                </div>
              </div>
              <div class="form-group">
                <label for="inputSpec" class="col-sm-2 control-label">规格</label>
                <div class="col-sm-10">
                  <input name="spec" type="text" class="form-control" id="inputSpec" placeholder="读取错误"
                         autocomplete="off">
                </div>
              </div>
              <div class="form-group">
                <label for="inputUnit" class="col-sm-2 control-label">单位</label>
                <div class="col-sm-10">
                  <input name="unit" type="text" class="form-control" id="inputUnit" placeholder="读取错误"
                         autocomplete="off">
                </div>
              </div>
              <div class="form-group">
                <label for="inputLowWarning" class="col-sm-2 control-label">低限警告</label>
                <div class="col-sm-10">
                  <input name="lowwarning" type="number" class="form-control" id="inputLowWarning" placeholder="读取错误"
                         autocomplete="off">
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button id="delDrugBtn" type="button" class="btn btn-danger btn-sm" style="float: left"
                    data-toggle="tooltip" data-placement="right" title="慎重!这将会删除该药品">删除
            </button>
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button id="saveChange" type="button" class="btn btn-primary">修改</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Add Modal -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="addModalLabel">添加新药品</h4>
          </div>
          <div class="modal-body">
            <form id="addForm" class="form-horizontal">
              <input name="do" type="hidden" value="doAdd"/>
              <div class="form-group">
                <label for="addName" class="col-sm-2 control-label">名称</label>
                <div class="col-sm-10">
                  <input name="name" type="text" class="form-control" id="addName" autocomplete="off"
                         data-toggle="tooltip" data-placement="top" title="请输入药品通用名称">
                </div>
              </div>
              <div class="form-group">
                <label for="addPinYinMa" class="col-sm-2 control-label">拼音码</label>
                <div class="col-sm-10">
                  <input name="pinyinma" type="text" class="form-control" id="addPinYinMa" autocomplete="off"
                         data-toggle="tooltip" data-placement="top" title="大写的药品拼音缩写">
                </div>
              </div>
              <div class="form-group">
                <label for="addSpec" class="col-sm-2 control-label">规格</label>
                <div class="col-sm-10">
                  <input name="spec" type="text" class="form-control" id="addSpec" autocomplete="off"
                         data-toggle="tooltip" data-placement="top" title="药品的规格,或者包装">
                </div>
              </div>
              <div class="form-group">
                <label for="addUnit" class="col-sm-2 control-label">单位</label>
                <div class="col-sm-10">
                  <input name="unit" type="text" class="form-control" id="addUnit" autocomplete="off"
                         data-toggle="tooltip" data-placement="top" title="计量单位">
                </div>
              </div>
              <div class="form-group">
                <label for="addLowWarning" class="col-sm-2 control-label">低限警告</label>
                <div class="col-sm-10">
                  <input name="lowwarning" type="number" class="form-control" id="addLowWarning" autocomplete="off"
                         data-toggle="tooltip" data-placement="top" title="库存最低限度,低于这个值会有提醒">
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button id="addBtn" type="button" class="btn btn-primary">增加</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<include file="./Public/Tpl/footer.html"/>
<script>
    var size = 10;
    var page = 1;
    var drugList = {list: [], count: 10};
    var app = new Vue({
        el: '#drugList',
        data: drugList
    });
    $(document).ready(function () {
        //加载更多
        layui.use(['laypage', 'layer'], function () {
            loadList(size,page);
            layer = layui.layer;
            laypage = layui.laypage;
            laypage({
                cont: 'drugPage'
                , pages: drugList.count
                , skin: '#337ab7'
                , skip: true,
                jump: function (obj, first) {
                    if (!first) {
                        page = obj.curr;
                        loadList(size, page);
                    }
                }
            });
        });
        //点击库存列表填充模态框
        $("#drugList").on("click", "tr", function (ev) {
            $("#drugModalLabel").html("药品编号: " + $(this).find("td")[0].innerHTML);
            $("#inputDrugId").attr("value", $(this).find("td")[0].innerHTML);
            $("#inputName").attr("value", $(this).find("td")[1].innerHTML);
            $("#inputPinYinMa").attr("value", $(this).find("td")[2].innerHTML);
            $("#inputSpec").attr("value", $(this).find("td")[3].innerHTML);
            $("#inputUnit").attr("value", $(this).find("td")[4].innerHTML);
            $("#inputLowWarning").attr("value", $(this).find("td")[5].innerHTML);
        });
        //响应保存提交事件
        $("#saveChange").on("click", function (ev) {
            var lowWarning = $("#inputLowWarning").val();
            if (lowWarning == "" || isNaN(lowWarning)) {
                layer.msg("低限必须填写且只能为整数!");
            } else {
                //提交事件
                var Form = $("#drugForm");
                $.ajax({
                    url: "{:U('Drug/doChangeInfo')}",
                    data: Form.serialize(),
                    dataType: "json",
                    type: "POST",
                    success: function (data) {
                        console.log(data);
                        if (data['code'] == 200) {
                            $("#drugModal").modal('toggle');
                            loadMore("#drugList", "{:U('Index/getDrugList')}", NOW_PAGE);
                            Form[0].reset();
                            layer.msg("修改成功!",{icon: 1});
                        } else {
                            layer.msg("处理失败了!原因:" + data['msg'],{icon: 2});
                        }
                    },
                    error: function () {
                        layer.msg("提交过程中发生问题! 请联系管理员",{icon: 3});
                    },
                    beforeSend: function () {
                        this.layerIndex = layer.load(0, {shade: [0.1, '#393D49']});
                    },
                    complete: function () {
                        layer.close(this.layerIndex);
                        loadList(size,page);
                    }
                })
            }
        });
        //响应添加药品
        $("#addBtn").on("click", function (ev) {
            var lowWarning = $("#addLowWarning").val();
            if (lowWarning == "" || isNaN(lowWarning)) {
                layer.msg("低限必须填写且只能为整数!",{icon: 0});
            } else {
                //提交事件
                var Form = $("#addForm");
                $.ajax({
                    url: "{:U('Drug/addDrug')}",
                    data: Form.serialize(),
                    datatype: "json",
                    type: "POST",
                    beforeSend: function () {

                    },
                    success: function (data) {
                        console.log(data);
                        if (data['code'] == 200) {
                            $("#addModal").modal('toggle');
                            loadMore("#drugList", "{:U('Index/getDrugList')}", NOW_PAGE);
                            Form[0].reset();
                            layer.msg("添加成功!",{icon: 1});
                        } else {
                            layer.msg("处理失败了!原因:" + data['msg'],{icon: 2});
                        }
                    },
                    error: function () {
                        layer.msg("提交过程中发生问题! 请联系管理员",{icon: 3});
                    }
                })
            }
        });
        //响应删除用户
        $("#delDrugBtn").on("click", function () {
            layer.confirm('确定要删除该药品？', {
                btn: ['确认','取消'] //按钮
            }, function(){
                var Form = $("#drugForm");
                $.ajax({
                    url: "{:U('Drug/delDrug')}",
                    data: "do=delDrug&" + Form.serialize(),
                    datatype: "json",
                    type: "POST",
                    success: function (data) {
                        console.log(data);
                        if (data['code'] == 200) {
                            $("#drugModal").modal('toggle');
                            loadMore("#drugList", "{:U('Index/getDrugList')}", NOW_PAGE);
                            Form[0].reset();
                            layer.msg("删除了!",{icon: 1});
                            loadList(size,page);
                        } else {
                            layer.msg("处理失败了!原因:" + data['msg'],{icon: 2});
                        }
                    },
                    error: function () {
                        layer.msg("提交过程中发生问题! 请联系管理员",{icon: 3});
                    }
                })
            }, function(){});
        });

    });
    function loadList(size, page) {
        $.ajax({
            type: 'POST',
            url: "{:U('Drug/getDrugList')}",
            data: {"size": size, "page": page},
            dataType: 'json',
            async:  false,
            success: function (rs) {
                if (rs.code == 200) {
                    drugList.list = rs.data.list;
                    drugList.count = Math.ceil(rs.data.count / size);
                }
            },
            beforeSend: function () {
                this.layerIndex = layer.load(1, {shade: [0.1, '#393D49']});
            },
            complete: function () {
                layer.close(this.layerIndex);
            }
        });
    }

</script>
</body>
</html>